<template>
  <div class="apartment-detail flex-col-start">

<!--    头部-->
    <div class="detail-head flex-col-center">
      <div class="detail-breadcrum flex-row-start" >
        <el-breadcrumb separator="/" style="font-size: 12px">
          <el-breadcrumb-item :to="{ path: breadcrumb.to }" v-for="breadcrumb in breadcrumbList">{{breadcrumb.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>

<!--    公寓信息：公寓信息 | 公寓侧边栏-->
    <div class="detail-box">
<!--      公寓信息-->
      <ApartmentInfoBox :apartment="apartmentDetail"></ApartmentInfoBox>
<!--      右边侧边栏-->
      <div class="detail-aside flex-col-start">

<!--        价格-->
        <div class="detail-aside-head detail-aside-item flex-row-start">
          <div style="font-size:35px;color: tomato">{{currency}} {{lowestPrice}}</div>
          <div style="font-size: 15px;margin-left: 5px">起/周</div>
        </div>
        <el-divider></el-divider>
<!--        按钮功能区-->
        <div class="flex-col-center detail-aside-body detail-aside-item">
          <button style="background-color: gold;color: #1a1a1a;border: none" class="aside-btn" @click="goToRoom">选择房型</button>
          <trans-button class="aside-btn" color="gold">一个特价优惠</trans-button>
        </div>
        <el-divider></el-divider>
        <div class="detail-aside-bottom detail-aside-item flex-col-start">

        </div>
      </div>
    </div>


<!--    房间信息-->
    <div class="detail-room-box flex-row-center" ref="room">
      <div class="detail-room-body">
        <RoomBox :list="apartmentDetail.roomList"></RoomBox>
      </div>
      <div class="detail-room-aside flex-col-start">
        <el-image src="http://119.3.255.192:9000/public/2023744db01e45.png"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import TransButton from "@/components/button/TransButton.vue";
import Carousel from "@/components/carousel/Carousel.vue";
import TextLink from "@/components/TextLink.vue";

import ApartmentInfoBox from "@/components/box/ApartmentInfoBox.vue";
import RoomBox from "@/components/box/RoomBox.vue";
import apartmentApi from "@/api/apartment/apartment";
import {goTo} from "@/util/common";
export default {
  name: "Detail",
  components: {RoomBox, ApartmentInfoBox, TextLink, Carousel, TransButton},
  data() {
    return {
      apartmentDetail:{},
      breadcrumbList:[
        {
          name:"首页",
          to:"/index/home"
        } ,
        {
          name:"英国租房"
        }
      ],
      lowestPrice:1,
      currency:"$",
    }
  },
  methods: {

    goToRoom(){
      let room = this.$refs.room.getBoundingClientRect();
      goTo(room.x,room.y)
    },
    getApartmentDetail(aId){
      apartmentApi.getDetailById(aId).then(resp=>{
        if(resp.code === 200){
          this.apartmentDetail=resp.data
          this.apartmentDetail.stuffList=this.apartmentDetail.stuffList.map(item=>item.stuffName)
          this.apartmentDetail.feetypeList=this.apartmentDetail.feetypeList.map(item=>item.feetype)
          this.init()
        }
      })
    },
    computedLowestPrice(){

      let list=this.apartmentDetail.roomList
      this.lowestPrice=0
      if(list.length>0){
        list.sort((a,b)=>{
          return a.price - b.price
        })
        this.lowestPrice=list[0].price
      }


    },
    init(){
     this.computedLowestPrice()
    }
  },
  mounted() {

    this.apartmentId = this.$route.query.aId;
    this.getApartmentDetail(this.apartmentId)

  }
}
</script>

<style scoped lang="less">

@body-width:50%;
@aside-width:300px;
  .apartment-detail{

    .detail-head{
      width: 100%;
      height: 50px;
      .detail-breadcrum{
        width: 73%;
        font-size: 12px;

      }

    }
    .detail-box{
      width: 100%;
      //height: 1500px;
      padding-bottom: 50px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;


      .detail-aside{
        position: sticky;
        top: 0;
        left: 0;
        width: @aside-width;
        height: fit-content;
        padding: 20px;
        border: 1px solid #e8e8e8;
        box-shadow: var(--box-shadow);
        .detail-aside-head{
        }
        .detail-aside-body{
          .aside-btn{
            width: 90%;
            height: 50px;
            font-weight: 550;
            margin-bottom: 20px;
            cursor: pointer;
          }

        }
        .detail-aside-bottom{

        }
        .detail-aside-item{
            width: 100%;
            margin-bottom: 5px;
        }
      }

    }

    .detail-room-box{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      padding: 50px 0;
      height: 1000px;
      background-color: #F8F8F6;
      .detail-room-body{
        width: @body-width;

      }
      .detail-room-aside{
        width: @aside-width;
        position: sticky;
        top: 0;
        left: 0;
        height: fit-content;
        margin-left: 40px;
        border: 1px solid #e8e8e8;
        box-shadow: var(--box-shadow);
        background-color: white;
      }
    }

  }
</style>